বুটস্ট্রাপ ড্রপডাউন মেনু হলো একটি টোগল মেনু যেটি পূর্বনির্ধারিত লিষ্ট থেকে একটি ভ্যালু পছন্দ/সিলেক্ট করতে সাহায্য করে।
নিচের উদাহরণে একটি বেসিক ড্রপডাউন তৈরি করে দেখানো হলোঃ
kt_satt_skill_example_id=1100
.dropdown
ক্লাসের মাধ্যমে ড্রপডাউন মেনুকে বুঝায়।
ড্রপডাউন মেনুকে অপেন করতে বাটন অথবা লিংক এর সাথে .dropdown-toggle
ক্লাস এবং data-toggle="dropdown"
এট্রিবিউট ব্যবহার করুন।
.caret
ক্লাসের দ্বারা একটি ক্যারেট চিহ্ন তৈরি হয় (), যেটি দ্বারা বুঝা যায় যে এটি একটি ড্রপডাউন বাটন।
প্রকৃত ড্রপডাউন মেনু তৈরি করতে
এলিমেন্টে .dropdown-menu
ক্লাস যুক্ত করুন।
ড্রপডাউন মেনুর মধ্যে লিংকগুলোকে আলাদা করার জন্য .divider
ক্লাস ব্যবহার করা হয়ঃ
kt_satt_skill_example_id=1101
ড্রপডাউন মেনুর মধ্যে হেডার যুক্ত করার জন্য .dropdown-header
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1102
ড্রপডাউন মেনুর কোনো একটি আইটেমকে ডিসেবল করার জন্য .disabled
ক্লাস ব্যবহার করুন।
ড্রপডাউন মেনুকে ডান পাশে নেওয়ার জন্য .dropdown-menu
ক্লাসের সাথে .dropdown-menu-right
ক্লাস ব্যবহার করুন।
যদি আপনি ড্রপডাউন মেনুকে নিচের দিকে প্রদর্শনের পরিবর্তে উপরের দিকে প্রদর্শন করতে চান, তাহলে kt_satt_skill_example_id=1103 যখন ড্রপডাউন মেনু তৈরি করবেন তখন kt_satt_skill_example_id=1104"dropdown"
ক্লাসের পরিবর্তে "dropup"
ক্লাস ব্যবহার করুনঃবুটস্ট্রাপ ড্রপডাউন এক্সেসিবিলিটি
role
এবং aria-*
এট্রিবিউট ব্যবহার করবেন, এতে স্ক্রিন রিডারদের ব্যবহারে সুবিধা হবেঃএকনজরে ড্রপডাউন সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
ক্লাস বর্ণনা .dropdown
একটি ড্রপডাউন মেনুকে নির্দেশ করে। .dropdown-menu
একটি ড্রপডাউন মেনু তৈরী করে। .dropdown-menu-right
ড্রপডাউন মেনুকে ডানে এ্যালাইন করে। .dropdown-header
ড্রপডাউন মেনুর মধ্যে একটি হেডার যুক্ত করে। .dropup
একটি ড্রপআপ মেনুকে নির্দেশ করে। .disabled
ড্রপডাউন মেনুর একটি আইটেমকে ডিজেবল করে রাখার জন্য ব্যবহার করা হয়। .divider
ড্রপডাউন মেনুর আইটেমগুলোকে হরিজন্টাল লাইনের মাধ্যমে আলাদা করার জন্য ব্যবহার করা হয়।
বড় কোনো কন্টেন্টকে লুকিয়ে রেখে টোগল করে দেখোনোর জন্য বুটস্ট্রাপ "কলাপ্স" ব্যবহার করা হয়। নিচের উদাহরণে একটি বেসিক কলাপ্সিবল তৈরি করা দেখানো হলোঃ
kt_satt_skill_example_id=1105
.collapse
ক্লাসের মাধ্যমে একটি কলাপ্সিবল এলিমেন্টকে বুঝানো হয়েছে। বাটনে ক্লিক করার সাথে সাথে কন্টেন্ট টি দেখা যায় আর ক্লিক করলে তা চলে যায়।
কলাপ্সিবল কন্টেন্টকে নিয়ন্ত্রন(দেখানো/লুকানো) করার জন্য, < a >
অথবা < button >
এলিমেন্টের মধ্যে data-toggle="collapse"
এট্রিবিউট যুক্ত করুন।
তারপর বাটন বা লিংকের সাথে কলাপ্সিবল কন্টেন্টকে (< div id="collapse" >
) সংযুক্ত করার জন্য করার জন্য data-target="#idName"
এট্রিবিউট যুক্ত করুন।
নোটঃ < a >
এলিমেন্টে data-target
এট্রিবিউটের পরিবর্তে href
এট্রিবিউট ব্যবহার করা যায়ঃ
kt_satt_skill_example_id=1106
ডিফল্টভাবে, কলাপ্সিবল কন্টেন্ট লুকানো অবস্থায় থাকে। ডিফল্টভাবে কন্টেন্টকে প্রদর্শিত অবস্থায় রাখার জন্য .in
ক্লাস যুক্ত করতে হবেঃ
kt_satt_skill_example_id=1107
নিচের উদাহরণে কিভাবে কলাপ্সিবল প্যানেল তৈরি করা যায় তা দেখানো হলোঃ
kt_satt_skill_example_id=1108
নিচের উদাহরণে লিস্ট গ্রুপ সহ একটি কলাপ্সিবল প্যানেল তৈরি করা দেখানো হলোঃ
kt_satt_skill_example_id=1109
নোটঃ কলাপ্সিবল আইটেমটি প্রদর্শিত হওয়ার সাথে সাথে পেরেন্ট এলিমেন্টের অন্য সব কলাপ্সিবল এলিমেন্ট ক্লোজ করে দেওয়ার জন্য data-parent
এট্রিবিউট ব্যবহার করতে হবে।
kt_satt_skill_example_id=1110
বুটস্ট্রাপ কলাপ্স অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS কলাপ্স রেফারেন্স পেজে ভিজিট করুন।
বেশিরভাগ ওয়েবপেজেরি মেনুবার থাকে।
এইচটিএমএলে আনওর্ডার্ড লিস্টের (< ul >
) মাধ্যমে মেনু তৈরি করা হয় (স্টাইল পরবর্তী বিষয়) যেমনঃ
kt_satt_skill_example_id=1112
এছাড়া আপনি বুটস্ট্রাপের ট্যাব এবং পিলের মাধ্যমেও মেনুবার তৈরি করতে পারেন। (নিচে দেখুন)
< ul class="nav nav-tabs" >
এর মাধ্যমে ট্যাব তৈরি করা যায়ঃ
টিপসঃ < li class="active" >
দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছে।
নিচের উদাহরণটিতে বুটস্ট্রাপ দ্বারা ন্যাভিগেশন ট্যাব তৈরি করে দেখানো হয়েছেঃ
kt_satt_skill_example_id=1113
আপনি চাইলে ট্যাবের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারেন।
নিচের উদাহরণে "Service" সেকশনে একটি ড্রপডাউন ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1114
< ul class="nav nav-pills" >
দ্বারা পিল তৈরি করা হয় এবং < li class="active" >
দ্বারা বর্তমান পেজটিকে হাইলাইট করা হয়েছেঃ
kt_satt_skill_example_id=1116
পিলকে ভার্টিক্যাল ভাবেও তৈরি করা যায়। এর জন্য .nav-stacked
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1118
এখানে শেষ কলামটিতে ভার্টিক্যাল আকারে পিল ব্যবহার করা হয়েছে।
যেখানে বড় স্ক্রিনে কলামগুলো পাশাপাশি অবস্থান করে। কিন্তু ছোট স্ক্রিনের ক্ষেত্রে কলামগুলো স্বয়ংক্রিয়ভাবে একটি একক কলামে রুপান্তরিত হয়ঃ
kt_satt_skill_example_id=1120
আমরা চাইলে পিলের মধ্যেও ড্রপডাউন মেনু ব্যবহার করতে পারি।
নিচের এই উদাহরণটিতে "Service" সেকশনে ড্রপডাউন ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1122
ট্যাব এবং পিলকে মধ্যস্থানে/জাস্টিফাই করার জন্য .nav-justified
ক্লাস ব্যবহার করুন।
মনে রাখবেন ৭৬৮ পিক্সেল থেকে ছোট স্ক্রিনে লিস্ট আইটেমগুলো নিচে নিচে চলে আসবে তবে কন্টেন্টগুলো ঠিক মাঝামাঝিতেই থাকবেঃ
kt_satt_skill_example_id=1124
ট্যাবকে টোগোলেবল করার জন্য, প্রত্যেকটি লিংকে এছাড়াও যদি আপনি ক্লিক করার সময় ট্যাবে ফেড-ইন এবং ফেড-আউট এফেক্ট যুক্ত করতে চান তাহলে kt_satt_skill_example_id=1126 ট্যাবের মতো পিলের ক্ষেত্রে ঠিক একই কোড ব্যবহার করা হয়। শুধুমাত্র kt_satt_skill_example_id=1129data-toggle="tab"
এট্রিবিউটটি ব্যবহার করুন।
তারপর একক একটি ID 'র সাথে .tab-pane
ক্লাসটি ব্যবহার করুন এবং .tab-content
ক্লাসযুক্ত একটি .tab-pane
ক্লাসের সাথে অবশ্যই .fade
ক্লাস ব্যবহার করুনঃবুটস্ট্রাপ টোগোলেবল/ডায়নামিক পিল
data-toggle="tab"
এট্রিবিউটের জায়গায় data-toggle="pill"
এট্রিবিউট ব্যবহার করতে হবেঃএকনজরে ট্যাব এবং পিল সংক্রান্ত ক্লাসগুলো দেখে নেইঃ
ক্লাস বর্ণনা .nav nav-tabs
একটি ন্যাভিগেশন ট্যাব তৈরি করে। .nav nav-pills
একটি ন্যাভিগেশন পিল তৈরি করে। .nav nav-pills nav-stacked
একটি ভার্টিক্যাল ন্যাভিগেশন পিল তৈরি করে। .nav-justified
৭৬৮ পিক্সেলের উর্দ্ধে স্ক্রিনের ক্ষেত্রে পেরেন্ট এলিমেন্টের সমান প্রস্থের ন্যাভিগেশন ট্যাব/পিল তৈরি করে। ছোট স্ক্রিনে এটি একের পর এক নিচে নিচে অবস্থান করবে। .disabled
ট্যাব/পিলকে ডিজেবল(unclickable) করার জন্য এটি ব্যবহার করা হয়। .tab-content
.tab-pane
ক্লাস এবং data-toggle="tab"
এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill"
)। এটি ট্যাব/পিলকে টোগোলেবল করে।.tab-pane
.tab-content
ক্লাস এবং data-toggle ="tab"
এট্রবিউটের সাথে একসাথে ব্যবহার করা যায় (পিলের ক্ষেত্রে data-toggle="pill"
)। এটি ট্যাব/পিলকে টোগোলেবল করে।
বুটস্ট্রাপ ন্যাভিগেশন বার হলো একটি ন্যাভিগেশন হেডার যা একটি পেজের উপরে ব্যবহার করা হয়:
বুটস্ট্রাপ দ্বারা খুব সহজে ডিভাইসের স্ক্রিন সাইজের উপর নির্ভর করে একটি পেজের ন্যাভিগেশন বারকে প্রসারিত বা কলাপ্স করা যায়।
একটি স্ট্যান্ডার্ড ন্যাভিগেশন বার তৈরি করার জন্য ক্লাস ব্যবহার করা হয়।
কিভাবে ন্যাভিগেশন বারকে একটি পেজের উপরে ব্যবহার করা যায় নিচের উদাহরণে দেখানো হলোঃ
kt_satt_skill_example_id=1136
যদি বুটস্ট্রাপের ডিফল্ট ন্যাভিগেশন বারটি আপনার পছন্দ না হয় তাহলে আপনি চাইলে কালো কালারের ন্যাভিগেশন বার ব্যবহার করতে পারেনঃ
এর জন্য শুধুমাত্র .navbar-default
ক্লাস এর পরিবর্তে .navbar-inverse
ক্লাস ব্যবহার করুনঃ
kt_satt_skill_example_id=1138
একজন ব্যবহারকারী তার ইচ্ছা মত ন্যাভিগেশন বারকে পেজের উপরে বা নিচে ফিক্সড করতে পারে।
এক্ষেত্রে ন্যাভিগেশন বারটি পেজের উপরে অথবা নিচে ফিক্সড থাকবে এমনকি যখন পেজটি স্ক্রলিং করা হয় তখনও এর অবস্থানের কোন পরিবর্তন হবে না।
ন্যাভিগেশন বারকে পেজের উপরে ফিক্সড করার জন্য .navbar-fixed-top
ক্লাসটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1139
ন্যাভিগেশন বারকে পেজের নিচে ফিক্সড করার জন্য .navbar-fixed-bottom
ক্লাসটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1140
আমরা চাইলে একটি ন্যাভিগেশন বারের সাথে ড্রপাডাউনও ব্যবহার করতে পারি।
নিচের এই উদাহরণে "Service" মেনুর মধ্যে ড্রপাডাউন ব্যবহার করা হয়েছে:
kt_satt_skill_example_id=1141
ন্যাভিগেশন বারের বাটনকে ডানদিকে নেয়ার জন্য .navbar-right
ক্লাস ব্যবহার করুনঃ
এই উদাহরণটিতে "Sign up" এবং "Log in" নামে দুইটি বাটনকে ন্যাভিগেশন বারের ডানদিকে ব্যবহার করা হয়েছে এবং বাটন গুলোর সাথে গ্লিফআইকনও ব্যবহার করা হয়েছেঃ
kt_satt_skill_example_id=1142
ন্যাভিগেশন বার ছোট স্ক্রিনের জন্য অনেক জায়গায় দখল করে।
এই সমস্যার সমাধানের জন্য ছোট স্ক্রিনের ক্ষেত্রে ন্যাভিগেশন বারকে হাইড করে রাখা যায় এবং প্রয়োজনের সময় প্রদর্শন করানো যায়।
এই উদাহরণটিতে ন্যাভিগেশন বারকে উপরে ডানদিকে বাটন আকারে রাখা হয়েছে। এক্ষেত্রে যখনই বাটনে ক্লিক করা হবে তখনই এটি প্রদর্শিত হবে অন্যথায় এটি হাইড হয়ে থাকবেঃ
kt_satt_skill_example_id=1143
বুটস্ট্রাপ ক্যারোসেল প্লাগ-ইন হলো এলিমেন্টের মধ্যে চক্রাকারে ঘুরার জন্য একটি কম্পোনেন্ট(component), যেমনঃ একটি ক্যারোসেল (স্লাইডসো)।
কিভাবে একটি বেসিক ক্যারোসেল তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলো:
kt_satt_skill_example_id=1146
আউটারমোস্ট ফাংশনের মাধ্যমে ক্যারোসেলকে নিয়ন্ত্রন করার জন্য ক্যারোসেলে একটি আইডি ব্যবহার করা হয় (এক্ষেত্রে ব্যবহার করা হয়েছে "Indicators" পার্ট: ইন্ডিকেটর হলো প্রত্যেকটি স্লাইডের নিচের ছোট গোল বৃত্ত (যার দ্বারা বুঝানো হয় যে, ক্যারোসেলে কতোগুলো স্লাইড রয়েছে এবং ইউজার বর্তমানে কোন স্লাইডটি দেখছে)। ইন্ডিকেটরগুলো একটি অর্ডার লিস্টে নির্দিষ্ট করে দেওয়া হয়, যাতে যখন ইউজার নির্দিষ্ট ডটে ক্লিক করে তখন কোন স্লাইডে যাবে তা নির্দিষ্ট করার জন্য "Wrapper for slides" পার্ট: স্লাইডগুলো প্রত্যেকটি স্লাইডের কন্টেন্টগুলো যেকোন একটি স্লাইডে অবশ্যই "Left এবং right কন্ট্রোল" পার্ট: এই কোডগুলোর মাধ্যমে "পূর্ববর্তী" এবং "পরবর্তী" বুঝায়, যার মাধ্যমে একজন ইউজার ইচ্ছে করলে পূর্বের এবং পরের স্লাইডগুলো ম্যানুয়েললি দেখতে পারে। প্রতিটি স্লাইডে ক্যাপশন তৈরি করার জন্য প্রত্যেকটি kt_satt_skill_example_id=1148 বুটস্ট্রাপ ক্যারেসেলের অপশন, মেথড এবং ইভেন্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের বুটস্ট্রাপ JS ক্যারেসেল রেফারেন্স পেজে ভিজিট করুন।id="carouselId"
)।class="carousel"
দ্বারা বুঝানো হয়েছে যে এই < div >
টি একটি ক্যারোসেল বহন করছে।.slide
ক্লাসের মাধ্যমে সিএসএস এর ট্রানজিশন এবং এ্যানিমেশন ইফেক্ট যুক্ত করা হয়েছে। নতুন আইটেমটিকে দেখানোর সময় এটিকে স্লাইড আকারে প্রদর্শন করে।
যদি আপনার এই ইফেক্টটির প্রয়োজন না হয়, তবে আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।data-ride="carousel"
এট্রিবিউটটি বুটস্ট্রাপকে পেজ লোড হওয়ার সাথে সাথে এ্যানিমেশন শুরু করার নির্দেশনা প্রদান করে।
.carousel-indicators
ক্লাস ব্যবহার করা হয়।data-target
এট্রিবিউটের মাধ্যমে ক্যারোসেলের আইডিকে লক্ষ্য করা হয়।data-slide-to
এট্রিবিউট ব্যবহার করা হয়।
.carousel-inner
ক্লাস যুক্ত < div >
এলিমেন্টের মধ্যে রাখতে হবে।.item
ক্লাস যুক্ত < div >
এলিমেন্টের মধ্যে রাখতে হবে। কন্টেন্ট টেক্সট হতে পারে আবার ইমেজও হতে পারে।.active
ক্লাস যুক্ত করতে হবে। অন্যথায় ক্যারোসেলটি দৃশ্যমান হবে না।
data-slide
এট্রিবিউট "prev"
অথবা "next"
কী-ওয়ার্ড গ্রহন করে, যেটি স্লাইডকে রিলেটিভ অবস্থান থেকে বর্তমান অবস্থানে পরিবর্তন করে।স্লাইডে ক্যাপশন যুক্ত করা
< div class="item" >
এর মধ্যে < div class="carousel-caption" >
যুক্ত করুনঃবুটস্ট্রাপ ক্যারোসেলের সম্পূর্ণ রেফারন্স
বুটস্ট্রাপ মোডাল প্লাগ-ইন হলো ডায়ালগ বক্স/পপ-আপ উইন্ডো যা বর্তমান পেজের উপরে প্রদর্শিত হয়ঃ
কিভাবে একটি বেসিক মোডাল তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলোঃ
kt_satt_skill_example_id=1167
"ট্রিগার" পার্টঃ
মোডাল উইন্ডোকে ট্রিগার করার জন্য, আপনাকে অবশ্যই একটি বাটন বা লিংক ব্যবহার করতে হবে।
তারপর বাটন বা লিংকের মধ্যে নিম্নলিখিত দুটি data-*
এট্রিবিউট অন্তর্ভুক্ত করুনঃ
data-toggle="modal"
এটি মোডাল উইন্ডো ওপেন করেdata-target="#myModal"
এটির মাধ্যমে মোডালের আইডিকে লক্ষ্য করা হয়
"মোডাল" পার্টঃ
মোডালের পেরেন্ট < div >
এ অবশ্যই একটি আইডি থাকতে হবে এবং এর ভ্যালু অবশ্যই data-target এট্রিবিউটের মতো হবে, যেটি মোডালকে ট্রিগার করার জন্য ব্যবহার করা হয় ("myModal")।
.modal
ক্লাস < div >
এলিমেন্টের কন্টেন্টকে মোডাল হিসেবে আইডেন্টিফাই করে এবং এর মধ্যে ফোকাস তৈরি করে।
.fade
ক্লাসের মাধ্যমে মোডালে ট্রানজিশন এফেক্ট যুক্ত করা হয়েছে। আপনি চাইলে এই ক্লাসটি বাদ দিতে পারেন।
role="dialog"
এট্রিবিউটটি ব্যবহার করা হয় স্ক্রিন রিডারদের এক্সেসিবিলিটি ইম্প্রুভ করার জন্য।
.modal-dialog
ক্লাসের মাধ্যমে মোডালের জন্য যথাযথ প্রস্থ এবং মার্জিন নিশ্চিত করা হয়।
"মোডাল কন্টেন্ট" পার্টঃ
class="modal-content"
যুক্ত < div >
এলিমেন্ট মোডালকে স্টাইল (border, background-color, etc.) করে। এই < div >
এলিমেন্টের মধ্যেই মোডাল হেডার, মোডাল বডি এবং মোডাল ফুটার যুক্ত করতে হবে।
মোডালের হেডারকে স্টাইল করার জন্য .modal-header
ক্লাস ব্যবহার করা হয়। হেডারের < button >
এলিমেন্টের মধ্যে data-dismiss="modal"
এট্রিবিউট থাকে যেটিতে ক্লিক করে মোডালটি ক্লোজ করা যায়। .close
ক্লাসটি ক্লোজ বাটনকে স্টাইল করে এবং .modal-title
ক্লাসটি মোডাল হেডারকে যথাযথ লাইন উচ্চতাসহকারে স্টাইল করে।
মোডালের বডিকে স্টাইল করার জন্য .modal-body
ক্লাস ব্যবহার করা হয়। হেডারের মধ্যে আপনার প্রয়োজন মতো এইচটিএমএল মার্কআপ ট্যাগ ব্যবহার করতে পারেবেন। যেমন; প্যারাগ্রাফ, ইমেজ, ভিডিও ইত্যাদি।
মোডালের ফুটারকে স্টাইল করার জন্য .modal-footer
ক্লাস ব্যবহার করা হয়। মনে রাখবেন এই অংশটি ডিফল্টভাবে ডানে এ্যালাইন অবস্থায় থাকে।
ছোট আকারের মোডালের জন্য .modal-sm
ক্লাস এবং বড় আকারের মোডালের জন্য .modal-lg
ক্লাস ব্যবহার করুন।
মোডালের আকার নির্ধারণের জন্য সাইজ ক্লাস গুলো .modal-dialog
ক্লাস যুক্ত < div >
এলিমেন্টের মধ্যে ব্যবহার করুনঃ
ছোট আকারঃ
kt_satt_skill_example_id=1168
বড় আকারঃ
kt_satt_skill_example_id=1169
বুটস্ট্রাপ টুলটিপ প্লাগ-ইন হলো ছোট পপ-আপ বক্স। যখন ইউজার কোন এলিমেন্টের উপর মাউস পয়েন্টার নিয়ে আসে তখন এটি প্রদর্শিত হয়ঃ
data-toggle="tooltip"
এট্রিবিউটটি যুক্ত করুন।title
এট্রিবিউটের ভ্যালু হিসেবে যুক্ত করুনঃkt_satt_skill_example_id=1170
নোটঃ টুলটিপ অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর tooltip()
মেথডটি কল করুন।
একটি ডকুমেন্টে অবস্থিত সকল টুলটিপকে সক্রিয় করার জন্য নিম্নলিখিত কোডটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1172
ডিফল্টভাবে টুলটিপ সাধারনত এলিমেন্টের উপরে প্রদর্শিত হয়।
টুলটিপের অবস্থান উপর, নিচ, বামে অথবা ডানে যেকোনো স্থানেই নির্ধারণ করা যায়। টুলটিপের অবস্থান নির্ধারণ করার জন্য data-placement
এট্রিবিউট ব্যবহার করুনঃ
kt_satt_skill_example_id=1174
বুটস্ট্রাপ পপ-ওভার প্লাগ-ইন টুলটিপের মতোই; এটি হলো একটি পপ-আপ বক্স, যখন একজন ইউজার কোন এলিমেন্টের ক্লিক করে তখন এটি প্রদর্শিত হয়। পার্থক্য হলো পপ-ওভার টুলটিপের চেয়ে বেশি কন্টেন্ট ধারণ করতে পারে।
data-toggle="popover"
এট্রিবিউট ব্যবহার করুন।title
এট্রিবিউট ব্যবহার করুন এবং পপ-ওভারের বডি নির্ধারণ করার জন্য data-content
এট্রিবিউট ব্যবহার করুনঃkt_satt_skill_example_id=1182
নোটঃ পপ-ওভার অবশ্যই জেকুয়েরির মাধ্যমে সক্রিয় করে দিতে হবে। জেকুয়েরির মাধ্যমে সক্রিয় করার জন্য প্রথমে নির্দিষ্ট এলিমেন্টটিকে সিলেক্ট করুন এবং তারপর popover()
মেথড কল করুন।
একটি ডকুমেন্টের সবকটি পপ-ওভারকে কল করে একসাথে একটিভ করার জন্য নিম্নলিখিত কোড ব্যবহার করুনঃ
kt_satt_skill_example_id=1184
ডিফল্টভাবে, পপ-ওভার সাধারণত ডান পাশে প্রদর্শিত হয়।
পপ-ওভারকে উপর, নিচ, বাম অথবা ডানে যোকোনো স্থানেই প্রদর্শন করানো যায়। পপ-ওভারের অবস্থান নির্দিষ্ট করার জন্য data-placement
এট্রিবিউট ব্যবহার করুনঃ
kt_satt_skill_example_id=1187
ডিফল্টভাবে, আপনি যখন ঐ এলিমেন্টের উপর পূনরায় ক্লিক করবেন তখন পপ-ওভারটি ক্লোজ হয়ে যাবে। যাইহোক, আপনি যদি চান এলিমেন্টের বাহিরেও ক্লিক করলে পপ-ওভারটি ক্লোজ হয়ে যাক তাহলে data-trigger="focus"
এট্রিবিউটটি ব্যবহার করুনঃ
kt_satt_skill_example_id=1189
টিপস: যদি আপনি এলিমেন্টের উপর মাউস হোভারের মাধ্যমে পপ-ওভার প্রদর্শন করতে চান তাহলে, data-trigger="hover"
এট্রিবিউট ব্যবহার করুনঃ
kt_satt_skill_example_id=1190
বুটস্ট্রাপ স্ক্রলস্পাই প্লাগ-ইন স্ক্রল পজিশনের উপর ভিত্তি করে ন্যাভিগেশন লিস্টে স্বয়ংক্রিয়ভাবে আপডেট পাঠানোর জন্য ব্যবহার করা হয়।
কিভাবে বুটস্ট্রাপ স্ক্রলস্পাই তৈরি করা যায় তা নিচের উদাহরণে দেখানো হলোঃ
kt_satt_skill_example_id=1192
যেই এলিমেন্টটিকে স্ক্রলযোগ্য এরিয়া করতে চান ঐ এলিমেন্টটিতে data-spy="scroll"
এট্রিবিউট যুক্ত করুন (এক্ষেত্রে সাধারণত < body >
এলিমেন্টই ব্যবহার করা হয়)।
তারপর data-target
এট্রিবিউট যুক্ত করুন যার ভ্যালু হবে ন্যাভিগেশন বারের আইডি বা ক্লাস (.navbar
)। এর মাধ্যমে ন্যাভবারের সাথে স্ক্রলযোগ্য এরিয়ার লিংক করা হয়।
মনে রাখবেন অবশ্যই স্ক্রলযোগ্য এলিমেন্টের আইডির সাথে ন্যাভিগেশন লিংকের আইডির সাথে মিল হতে হবে (< div id="section1" >
সাথে < a href="#section1" >
) মিল থাকতে হবে।
data-offset
এট্রিবিউটের মাধ্যমে এটা নির্দিষ্ট করা হয় যে কতো পিক্সেলের মধ্যে স্ক্রলিং একটিভ হবে। ডিফল্ট ভ্যালু হলো 10px।
এই উদাহরণে মেনু হিসেবে আমরা বুটস্ট্রাপের vertical ন্যাভিগেশন পিল ব্যবহার করেছি।
kt_satt_skill_example_id=1193
বুটস্ট্রাপ এফিক্স প্লাগ-ইনের মাধ্যমে একটি এলিমেন্টকে পেজের একটি জায়গায় আবদ্ধ করা যায়। এটি প্রায়ই ন্যাভিগেশন মেনু অথবা সামাজিক মাধ্যমের আইকন বাটনে ব্যবহার করা হয় যেন উপর-নিচ স্ক্রলিংয়ের সময়ে এগুলো একটি স্থানে গিয়ে অবদ্ধ বা থেমে যায়।
স্ক্রল পজিশনের উপর ভিত্তি করে প্লাগ-ইনটি এর আচরনকে on এবং off এ টোগল (সিএসএস position
প্রোপার্টিকে static
থেকে fixed
) করে।
এফিক্সের মাধ্যমে যখন আমরা পেজ উপর-নিচ স্ক্রলিং করি, মেনুটি সবসময় দৃশ্যমান থাকে এবং এর অবস্থানে গিয়ে থেমে যায়।
কিভাবে একটি horizontal এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:
kt_satt_skill_example_id=1198
কিভাবে একটি vertical এফিক্স মেনুবার তৈরি করা যায় তা নিম্নলিখিত উদাহরণে দেখানো হলো:
kt_satt_skill_example_id=1199
যেই এলিমেন্টে আপনি এফিক্স করতে চান সেটিতে data-spy="affix"
এট্রিবিউট যুক্ত করুন।
স্ক্রলের অবস্থান হিসেব করার জন্য data-offset-top|bottom
এট্রিবিউট ব্যবহার করুন (অপশনাল) ।
এফিক্স প্লাগ-ইন তিনটি ক্লাসের মধ্যে টোগল তৈরি করে: .affix
, .affix-top
, এবং .affix-bottom
। প্রত্যেকটি ক্লাসই নির্দিষ্ট স্টেটকে রিপ্রেজেন্ট করে। আসল অবস্থান মোকাবেলা করার জন্য আপনাকে অবশ্যই সিএসএস প্রোপার্টি ব্যবহার করতে হবে। শুধুমাত্র ব্যতিক্রম এক্ষেত্রেই, .affix
ক্লাসে শুধুমাত্র position:fixed
ব্যবহার করতে হবে।
.affix-top
অথবা .affix-bottom
ক্লাস যুক্ত করে নেয়। এক্ষেত্রে সিএসএসের মাধ্যমে অবস্থান নির্ধারন করার প্রয়োজন নেই।.affix
ক্লাসের (sets position:fixed
) মাধ্যমে .affix-top
অথবা .affix-bottom
ক্লাসকে রিপ্লেস করে। পেজের কোন স্থানে এফিক্স এলিমেন্টটির স্থান হবে এটা অবশ্যই আপনাকে সিএসএসের top
অথবা bottom
প্রোপার্টির মাধ্যমে নির্ধারণ করে দিতে হবে।.affix-bottom
ক্লাসের মাধ্যমে .affix
ক্লাস রিপ্লেস হবে। যেহেতু অফসেট হলো অপশনাল, প্রথম সেটিং এ যথাযথ সিএসএস ব্যবহার করতে হবে। এই ক্ষেত্রে, যখন প্রয়োজন হবে তখন position:absolute
ব্যবহার করবে।উপরের প্রথম উদাহরণে, যখন আমরা উপর থেকে ১৯৭ পিক্সেল স্ক্রলিং করি তখন এফিক্স প্লাগ-ইন
স্ক্রলস্পাই প্লাগ-ইনের সাথে এফিক্স প্লাগ-ইনের ব্যবহার:
kt_satt_skill_example_id=1200
kt_satt_skill_example_id=1202
আরও দেখুন...